<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>BOS管理系统 首页</title>
		<link href="favicon.ico" rel="icon" type="image/x-icon" />
		<!-- 导入jquery核心类库 -->
		<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
		<!-- 导入easyui类库 -->
		<link id="easyuiTheme" rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css">
		<link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css">
		<link rel="stylesheet" type="text/css" href="../css/default.css">
		<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
		<!-- 导入ztree类库 -->
		<link rel="stylesheet" href="../js/ztree/zTreeStyle.css" type="text/css" />
		<script src="../js/ztree/jquery.ztree.all-3.5.js" type="text/javascript"></script>
		<script src="../js/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
		<script type="text/javascript">
			//开启简单ztree使用
		$(function(){
			var setting = {
				data: {
					simpleData: {
						enable: true
					}
				},
				callback: {
						onClick : function(event, treeId, treeNode, clickFlag){
							var content = '<div style="width:100%;height:100%;overflow:hidden;">'
								+ '<iframe src="'
								+ treeNode.page
								+ '" scrolling="auto" style="width:100%;height:100%;border:0;" ></iframe></div>';
							
							// 没有page树形菜单，不打开选项卡
							if(treeNode.page != undefined && treeNode.page != ""){
								// 如果选项卡已经打开，选中 
								if($("#tabs").tabs('exists',treeNode.name)){
									// 选中选项卡
									$("#tabs").tabs('select',treeNode.name);
								}else{
									// 如果没有打开，添加选项卡 
									$("#tabs").tabs('add',{
										title:treeNode.name,
										content: content,
										closable :true
									});
								}
							}
						}
					}
			};
			//编写ztree
			var zNodes =[
				{ id:1, pId:0, name:"父节点1", open:true},
				{ id:11, pId:1, name:"百度",page:'http://www.baidu.com'},
				{ id:12, pId:1, name:"网易首页",page:'http://www.163.com'},
				{ id:2, pId:0, name:"父节点2"},
				{ id:22, pId:2, name:"QQ",page:'http://www.qq.com'},
				{ id:23, pId:2, name:"126邮箱",page:'http://www.126.com'},
			];
			
			$(document).ready(function(){
				$.fn.zTree.init($("#treeDemo"), setting, zNodes);
			});
			
			$('#tabs').tabs({
				onContextMenu : function(e,title,index){
					$('#mm').menu('show', { 
						left: e.pageX,
						top: e.pageY 
					});
					e.preventDefault(); // 禁用原来的右键效果 
				}
			});
			$("#closeCurrent").click(function(){
		    //获取选中的标签索引
			    var tab = $('#tabs').tabs('getSelected');
			    var index = $('#tabs').tabs('getTabIndex',tab);
			    $("#tabs").tabs("close",index);
		   });
		   //关闭选中之外的选项卡
		    $("#closeOthers").click(function(){
			    //获取所有标签
			    var tabs = $("#tabs").tabs("tabs");
			    var length = tabs.length;
			    //获取选中标签的索引
			    var tab = $('#tabs').tabs('getSelected');
			    var index = $('#tabs').tabs('getTabIndex',tab);
			    //关闭选中标签之前的标签
			    for(var i=0;i<index;i++){
			    	$("#tabs").tabs("close",1);
			    }
			    //关闭选中标签之后的标签
			    for(var i=0;i<length-index-1;i++){
			     	$("#tabs").tabs("close",1);
			    }
		    });
		    //关闭所有标签
			$("#closeAll").click(function(){
				var tabs = $("#tabs").tabs("tabs");
				var length = tabs.length;
				for(var i=0;i<length;i++){
				    $("#tabs").tabs("close",1);
				}
			});
			
			
		});
		</script>
	</head>
	
	
	<body class="easyui-layout">   
	    <div data-options="region:'north',split:true" style="height:100px;">
	    	<div style="position: absolute; right: 5px; bottom: 10px; ">
				<a href="javascript:void(0);" class="easyui-menubutton" data-options="menu:'#layout_north_pfMenu',iconCls:'icon-ok'">更换皮肤</a>
				<a href="javascript:void(0);" class="easyui-menubutton" data-options="menu:'#layout_north_kzmbMenu',iconCls:'icon-help'">控制面板</a>
			</div>
			<div id="layout_north_pfMenu" style="width: 120px; display: none;">
				<div onclick="changeTheme('default');">default</div>
				<div onclick="changeTheme('gray');">gray</div>
				<div onclick="changeTheme('black');">black</div>
				<div onclick="changeTheme('bootstrap');">bootstrap</div>
				<div onclick="changeTheme('metro');">metro</div>
			</div>
			<div id="layout_north_kzmbMenu" style="width: 100px; display: none;">
				<div onclick="editPassword();">修改密码</div>
				<div onclick="showAbout();">联系管理员</div>
				<div class="menu-sep"></div>
				<div onclick="logoutFun();">退出系统</div>
			</div>
	    </div>   
	    <div data-options="region:'south',split:true" style="height:100px;"></div>   
	    <div data-options="region:'west',title:'菜单导航',split:true" style="width:180px;">
	    	<div id="aa" class="easyui-accordion" style="width:300px;height:200px;" data-options = "fit:true">   
			    <div title="Title1" data-options="selected:true" style="overflow:auto;padding:10px;">   
			   		<ul id="treeDemo" class="ztree"></ul>
			    </div>   
			    <div title="Title2" data-options="" style="padding:10px;">   
			    	
			    </div>   
			</div> 
	    </div>   
	    <div data-options="region:'center'">
	    	<!--
            	选项卡
            -->
            <div id="tabs" class="easyui-tabs" style="width:500px;height:250px;" data-options = "fit:true">   
			    <div title="消息中心" style="padding:20px;">   
					
			    </div>   
			</div>
	    </div>  
	    <!--
        	右键选项卡
        -->
	    <div id="mm" class="easyui-menu" style="width:120px;">
			<div id='closeCurrent' data-options="name:'Close'">关闭当前窗口</div>
			<div id='closeOthers' data-options="name:'CloseOthers'">关闭其它窗口</div>
			<div class="menu-sep"></div>
			<div id="closeAll" data-options="iconCls:'icon-cancel',name:'CloseAll'">关闭全部窗口</div>
		</div>
	</body> 
		
</html>
